<template>
  <lay-container>
    <div class="container-demo">
      <div class="conleft">
        <!-- 轮播图 -->
        <lay-carousel  anim="updown" style="display:inline-block;width:100%;height: 100%" :autoplay="true">
          <lay-carousel-item id="1">
            <div style="color: white;text-align: center;width:100%;height:100%;line-height:300px;background-color:#009688;">条目一</div>
          </lay-carousel-item>
          <lay-carousel-item id="2">
            <div style="color: white;text-align: center;width:100%;height:100%;line-height:300px;background-color:#5FB878;">条目二</div>
          </lay-carousel-item>
          <lay-carousel-item id="3">
            <div style="color: white;text-align: center;width:100%;height:100%;line-height:300px;background-color:#FFB800;">条目三</div>
          </lay-carousel-item>
          <lay-carousel-item id="4">
            <div style="color: white;text-align: center;width:100%;height:100%;line-height:300px;background-color:#FF5722;">条目四</div>
          </lay-carousel-item>
        </lay-carousel>
      </div>
      <div class="conmiddle">
        <!-- 中间内容区域 -->
        <div class="conmiddleleft">

        </div>
        <div class="conmiddlemid">
          <div class="conmiddlemid_one">

          </div>
          <div class="conmiddlemid_enm">

          </div>
        </div>
      </div>
      <div class="conright">
        <!-- 右侧内容区域 -->
        <!-- 卡片 -->
        <div class="profile-card">
          <!-- 顶部标签 -->
          <div class="top-tag">吃饱了才有力气干活</div>

          <!-- 头像部分 -->
          <div class="avatar-container" @click="showLoginModal"> <!-- 点击头像显示登录弹窗 -->
            <img :src="userddd.profilePicture" alt="头像">
          </div>

          <!-- 用户信息 -->
          <div class="username">{{ userddd.username }}</div>
          <div class="subtitle">{{ userddd.subtitle }}</div>

          <!-- 底部图标 -->
          <div class="footer-icons">
            <img src="../afterloggingin/img/gwc.svg">
            <img src="../afterloggingin/img/huowu.svg">
            <img src="../afterloggingin/img/soc.svg">
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <transition name="modal-overlay">
      <div v-if="isLoginModalVisible" class="usermodal-overlay">
        <div class="usermodal-content" style="height: 480px">
          <!-- 登录框内右上角关闭按钮 -->
          <img src="../img/guanbi.svg" alt="关闭" class="userclose-icon" @click="closeLoginModal" />
          <!-- 登录内容 -->
          <Login @login-success="handleLoginSuccess" />
        </div>
      </div>
    </transition>
  </lay-container>
</template>

<script setup>
import "./Selling.css";
import Login from "@/components/login/Login.vue";
import { ref, onMounted } from "vue";
import tx from '../img/logo.png'

// 控制浮空弹窗显示状态
const isLoginModalVisible = ref(false);
const userddd = ref({
  username: "未登录",           // 默认值
  subtitle: "暂无签名",         // 默认值
  profilePicture: tx // 默认头像
});

// 获取用户数据并赋值给 userddd
onMounted(() => {
  const user = JSON.parse(localStorage.getItem("user"));
  if (user) {
    userddd.value.username = user.username || "未登录";   // 若数据为空则使用默认值
    userddd.value.subtitle = user.subtitle || "暂无签名";   // 若数据为空则使用默认值
    userddd.value.profilePicture = user.profilePicture || "https://telegraph-image-766.pages.dev/file/6bc579156c90835f3a738.jpg"; // 默认头像
  }
});

// 显示登录弹窗
const showLoginModal = () => {
  isLoginModalVisible.value = true;
};

// 关闭登录弹窗
const closeLoginModal = () => {
  isLoginModalVisible.value = false;
};

// 登录成功时关闭弹窗
const handleLoginSuccess = () => {
  isLoginModalVisible.value = false;
  setTimeout(() => {
    window.location.reload(); // 延迟两秒后刷新页面
  }, 1000);
};
</script>
